<template>
  <section>
    <van-sticky>
      <PageHeader title="汽车认证"/>
    </van-sticky>

    <div class="pd10 bg-color-white">
      <div class="text-left font-common">完成车子认证，点亮车子图标</div>
      <div class="text-left font-common mt10">请上传清晰的行驶证(能看清姓名等信息)，<a class="blue" @click="imagePreview(STATIC_BASE_URL + 'images/mp/cp_15.jpeg')">查看示例</a></div>
      <div class="mt10 relative">
        <img :src="STATIC_BASE_URL + 'images/mp/cp_15.jpeg'" class="w100 eg-img" />
        <div class="inline-block upload-icon-wrapper">
          <van-uploader :before-read="beforeUploadRead" :after-read="afterUploadRead">
            <i class="iconfont icon-shangchuantupian" style="font-size: 100px;" />
          </van-uploader>
        </div>
      </div>
      <div class="text-left font-common mt10" v-if="fileUrl"><a class="blue" @click="imagePreview(fileUrl)">上传的证书</a></div>

      <div class="pt10 pb10">
        <van-button type="primary" round block @click="save" :disabled="disabled">提交认证</van-button>
      </div>
    </div>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Uploader, Toast, Sticky, Button, ImagePreview} from 'vant';
  import {fileUploadByBase64Uri, memberAuthSaveUri} from "../../../common/api";
  import {STATIC_BASE_URL} from "../../../common/api";
  import PageHeader from "../../componets/PageHeader";

  Vue.use(Uploader).use(Toast).use(Sticky).use(Button).use(ImagePreview);

  export default {
    components: {
      PageHeader,
      [ImagePreview.Component.name]: ImagePreview.Component
    },
    data() {
      return {
        STATIC_BASE_URL: STATIC_BASE_URL,
        member: null,
        user: null,
        fileId: 0,
        fileUrl: '',
        disabled: false
      }
    },
    methods: {
      beforeUploadRead(file) {
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
          Toast('请上传 jpg/png 格式图片');
          return false;
        }
        return true;
      },
      afterUploadRead(file) {
        const that = this;
        that.$http.post(fileUploadByBase64Uri, {fileData: file.content, upload_token: that.GLOBAL.userInfo.upload_token}, {emulateJSON: true}).then(response => {
          let {msg, code, file_id, url} = response.body;
          if (code != 0) {
            that.toast(msg)
          } else {
            that.fileId = file_id;
            that.fileUrl = url;
          }
        }, response => {
          that.toast('发生错误')
        })
      },
      imagePreview(url) {
        ImagePreview({
          images: [url],
          closeable: true
        });
      },
      save() {
        if(this.fileId == 0) {
          this.toast('请上传行驶证');
          return;
        }
        const that = this;
        const formData = {
          type: 'car',
          file_id: this.fileId
        };
        that.$http.post(memberAuthSaveUri, formData, {emulateJSON: true}).then(response => {
          let {msg, code, data} = response.body
          if (code != 0) {
            that.toast(msg)
          } else {
            that.toast.success('提交成功');
            that.disabled = true;
            that.EventBus.$emit('OnMemberAuth', null);
            that.$router.back();
          }
        }, response => {
          that.toast('发生错误');
        })
      }
    },
    mounted: function () {
      this.member = this.GLOBAL.memberProfile;
      this.user = this.GLOBAL.userInfo;
      if(this.member && this.member.realname_auth_status == 0) {
        this.toast('请先完成实名认证');
        this.$router.replace({name: 'MyAuthFaceId'});
      }
      this.EventBus.$on('OnUserLogined', () => {
        this.user = this.GLOBAL.userInfo;
        this.member = this.GLOBAL.memberProfile;
        if(this.member.realname_auth_status == 0) {
          this.toast('请先完成实名认证');
          this.$router.replace({name: 'MyAuthFaceId'});
        }
      });
    }
  }
</script>

<style scoped>
  .eg-img {
    transition: .5s ease-in-out;
    filter: blur(3px);
    -webkit-filter: blur(3px);
  }
  .upload-icon-wrapper {
    z-index: 1;
    left: 35%;
    top: 30%;
    position: absolute;
    color: #000000;
  }
</style>
